import React, { useEffect, useState } from 'react'
import style from './Detail.module.scss'
import { useLocation } from 'react-router-dom'

interface Rat {
    avatar:string
    rateTime:number
    text:string
    username:string
}


interface Con {
    name:string
    description:string
    sellCount:number
    rating:number
    price:number
    image:string
    info:string
    ratings:Rat[]
}


const Detail = () => {
    const [con,setCon] = useState<Con[]>([])
    const location = useLocation()
    useEffect(() => {
        setCon(location.state.data)
    })
    console.log(con)
  return (
    <div className={style.list}>
        <img src={con.image} alt="" />
        <header>
            <h4>{con.name}</h4>
            <div className={style.detail}>
                <p>月售{con.sellCount}单</p>
                <p>好评率{con.rating}%</p>
            </div>
            <div className={style.price}>
                <h6>￥{con.price}</h6>
                <span>加入购物车</span>
            </div>
        </header>
        <div className={style.splite}></div>
        <div className={style.info}>
            <h4>商品信息</h4>
            <p>{con.info}</p>
        </div>
        <div className={style.splite}></div>
        <div className={style.rating}>
            <h4>商品评价</h4>
            <div className="rating-selector">
                <span className={style.positive}>全部<span className={style.count}></span></span>
                <span className={style.positive}>推荐<span className={style.count}></span></span>
                <span className={style.positive}>吐槽<span className={style.count}></span></span>
            </div>
        </div>
    </div>
  )
}

export default Detail